<template>
<div class='list'>
        <div class="item" v-for="(goods,index) in items" :key="index">
            <div class="item-l">
                <img class="item-img" :src="goods.src" alt="">
                </div>
                <div class="item-r">
                    <div class="item-title">{{goods.title}}</div>
                    <div class="item-price">单价:{{goods.price|currency}}, 数量:{{goods.num}}</div>
                    <div class="item-opt">
                        <button @click="del(goods)">删除</button>
                    </div>    
                </div>
        </div>
        <div class="item-total" v-if="items.length">商品总价:{{total|currency}}</div>
        <div class="item-total" v-else>购物车中暂无商品</div>
    </div>
</template>

<script>
import {mapState,mapActions,mapGetters} from 'vuex'
export default {
  name: 'Shopcart',
  data(){
      return{

      }
  },
  computed:{
        ...mapState({
            items:state=>state.shopcart.items,
        }),
        ...mapGetters('shopcart',{total:'totalPrice' })
    },
  
    filters:{
        currency(value){
            return '￥ '+value;
        }
    },
  methods:{
        ...mapActions('shopcart',['del'])
    }
}
</script>

<style scoped>
  .item{
      display: flex;
      border-bottom: 1px dashed blueviolet;
  }
  .item-l{
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .item-r{
      flex: 1;
  }
  .item-title{
      margin-top: 20px;
  }
  .item-price{
      margin-top: 10px;
      color: red;
      font-weight: 800;
  }
  .item-opt{
      margin-top: 10px;
  }
  .item-opt>button{
      background-color: red;
      color: white;
      border: 0;
  }
</style>